import React from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Tabs, Cell, Button } from "react-vant";
import { useAppSelector } from "../../app/hooks";
import { useRequest } from "../../hooks/useRequest";
import { getTagList } from "../../service";
import { TagState } from "../../types";
const Index: React.FC = () => {
  const { loading, error, data } = useRequest<TagState[]>(getTagList);
  const token = useAppSelector((state) => state.user.token);
	const list = useAppSelector(state => state.user.list)

  const navigate = useNavigate();
  if (loading || !data) {
    return <div>数据加载中...</div>;
  }
  if (error) {
    return <div>报错： {error}</div>;
  }

  return (
    <div>
      <NavBar leftText="标签管理" onClickLeft={() => {navigate(-1)}} />
      <Tabs defaultActive={2}>
        <Tabs.TabPane title="全部标签">
          {data.data.map((v) => {
            return (
              <Cell
                icon={<img src={v.image}></img>}
                label={`${v.count}w人已关注`}
                key={v.id}
                title={v.title}
                value={
                  <Button type="primary" round>
                    关注
                  </Button>
                }
              ></Cell>
            );
          })}
        </Tabs.TabPane>
        <Tabs.TabPane title="我的关注">
          {token ? (
            <div>
              {list.map((v) => {
                return (
                  <Cell
                    icon={<img src={v.image}></img>}
                    key={v.id}
                    title={v.title}
                    value={
                      <Button type="primary" round>
                        已关注
                      </Button>
                    }
                  ></Cell>
                );
              })}
            </div>
          ) : (
            <div>
              <Button type="primary" onClick={() => navigate("/login")}>
                用户还未登录， 请登录
              </Button>
            </div>
          )}
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
